<template>
  <div id="videoCollect">
    <div class="num" v-if="count != 0 && !loading">
      共
      <span style="color:#fd7f2c;">{{ count }}</span> 个收藏
    </div>
    <ul
      v-if="table_data01.length && !loading"
      class="fixedThead"
      ref="fixedThead"
      :class="{ isShow: isFixed }"
      :style="showLeft == true ? 'left:222px' : 'left:98px'"
    >
      <li>视频</li>
      <li>发布人</li>
      <li tc @click="sort_fun(false, 1)" v-if="orderBy == 1 && sortValue == 1">
        点赞数
        <img src="@/assets/meng/down_up.png" v-if="orderBy == 1 && sortValue == 1" class="sort" />
        <img src="@/assets/meng/no_down_up.png" v-else />
      </li>
      <li tc v-else @click="sort_fun(true, 1)">
        点赞数
        <img src="@/assets/meng/up_down.png" v-if="orderBy == 0 && sortValue == 1" />
        <img src="@/assets/meng/no_down_up.png" v-else />
      </li>
      <li tc @click="sort_fun(false, 2)" v-if="orderBy == 1 && sortValue == 2" class="cursor">
        评论数
        <img src="@/assets/meng/down_up.png" v-if="orderBy == 1 && sortValue == 2" class="sort" />
        <img src="@/assets/meng/no_down_up.png" v-else />
      </li>
      <li tc v-else @click="sort_fun(true, 2)">
        评论数
        <img src="@/assets/meng/up_down.png" v-if="orderBy == 0 && sortValue == 2" />
        <img src="@/assets/meng/no_down_up.png" v-else />
      </li>
      <li tc @click="sort_fun(false, 3)" v-if="orderBy == 1 && sortValue == 3" class="cursor">
        转发数
        <img src="@/assets/meng/down_up.png" v-if="orderBy == 1 && sortValue == 3" class="sort" />
        <img src="@/assets/meng/no_down_up.png" v-else />
      </li>

      <li tc v-else @click="sort_fun(true, 3)">
        转发数
        <img src="@/assets/meng/up_down.png" v-if="orderBy == 0 && sortValue == 3" />
        <img src="@/assets/meng/no_down_up.png" v-else />
      </li>

      <li tc>操作</li>
    </ul>
    <table class="table" ref="tableEl">
      <thead>
        <tr :class="{ is_fixed: isFixed }" ref="th_tr_El">
          <th>视频</th>
          <th>发布人</th>
          <th @click="sort_fun(false, 1)" v-if="orderBy == 1 && sortValue == 1">
            点赞数
            <img
              src="@/assets/meng/down_up.png"
              v-if="orderBy == 1 && sortValue == 1"
              class="sort"
            />
            <img src="@/assets/meng/no_down_up.png" v-else />
          </th>
          <th v-else @click="sort_fun(true, 1)">
            点赞数
            <img src="@/assets/meng/up_down.png" v-if="orderBy == 0 && sortValue == 1" />
            <img src="@/assets/meng/no_down_up.png" v-else />
          </th>
          <th @click="sort_fun(false, 2)" v-if="orderBy == 1 && sortValue == 2" class="cursor">
            评论数
            <img
              src="@/assets/meng/down_up.png"
              v-if="orderBy == 1 && sortValue == 2"
              class="sort"
            />
            <img src="@/assets/meng/no_down_up.png" v-else />
          </th>
          <th v-else @click="sort_fun(true, 2)">
            评论数
            <img src="@/assets/meng/up_down.png" v-if="orderBy == 0 && sortValue == 2" />
            <img src="@/assets/meng/no_down_up.png" v-else />
          </th>
          <th @click="sort_fun(false, 3)" v-if="orderBy == 1 && sortValue == 3" class="cursor">
            转发数
            <img
              src="@/assets/meng/down_up.png"
              v-if="orderBy == 1 && sortValue == 3"
              class="sort"
            />
            <img src="@/assets/meng/no_down_up.png" v-else />
          </th>

          <th v-else @click="sort_fun(true, 3)">
            转发数
            <img src="@/assets/meng/up_down.png" v-if="orderBy == 0 && sortValue == 3" />
            <img src="@/assets/meng/no_down_up.png" v-else />
          </th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody v-if="table_data01.length != 0">
        <tr v-for="(item, index) in table_data01" :key="'table' + index" :id="!index ? 'tr1' : ''">
          <td>
            <div class="live_box">
              <div class="live_box_left" v-if="item.isDelete == 0">
                <img :src="item.thumPic" alt v-errorImg:video />
                <a :href="item.url" target="_blank">
                  <img src="@/assets/meng/hot_video18.png" class="playImg" />
                </a>
              </div>
              <div class="live_box_left_02" v-else>
                <img src="@/assets/li/delete.png" />
                <a :href="item.url" target="_blank">
                  <img src="@/assets/meng/hot_video18.png" class="playImg" />
                </a>
              </div>
              <div class="live_box_right">
                <div
                  class="title overflowTextWl"
                  v-if="item.isDelete == 0"
                  @click="videoDetails(item.awemeId)"
                >{{ item.title }}</div>
                <div class="delete" v-if="item.isDelete == 1">已删除或隐藏</div>
                <div class="time">发布时间：{{ timestamp(item.releaseTimestamp, "Y.M.D") }}</div>
              </div>
            </div>
          </td>
          <td>
            <div class="live_box">
              <div>
                <img :src="item.logo" alt class="talent_photo" @click="go_to_page01(item.authorId)" />
              </div>

              <div class="live_box_right">
                <div class="title" @click="go_to_page01(item.authorId)">{{ item.nickName }}</div>
              </div>
            </div>
          </td>
          <td>{{ format_num(item.favoriteCount) }}</td>
          <td>{{ format_num(item.commentCount) }}</td>
          <td>{{ format_num(item.shareCount) }}</td>
          <td>
            <button class="no_collect" @click="no_collect(item.awemeId, index)">取消收藏</button>
          </td>
        </tr>
      </tbody>
      <div v-if="!loading && table_data01.length == 0">
        <div class="zw">
          <img src="@/assets/liu/zw.png" />
          <p>您还未收藏任何内容哦~</p>
        </div>
      </div>
    </table>
    <p
      class="nothing"
      v-if="
        (table_data01.length < 30 && !loading && table_data01.length != 0) ||
          page * 30 == count
      "
    >我是有底线的～</p>
    <div class="pageBox" v-if="table_data01.length != 0 && !loading">
      <el-pagination
        background
        layout="prev, pager, next, jumper"
        :total="count"
        :page-size="30"
        :current-page="page"
        @current-change="get_data"
        :hide-on-single-page="true"
      ></el-pagination>
    </div>
    <div
      v-loading="loading"
      v-if="loading"
      class="loading"
      element-loading-text="拼命加载中..."
      element-loading-spinner="el-icon-loading"
    ></div>
    <div class="dialog_box">
      <el-dialog :visible.sync="dialogVisible1" :show-close="false">
        <p class="p1">取消收藏</p>
        <span class="isTips">是否取消收藏</span>
        <span slot="footer" class="dialog-footer">
          <el-button class="butTips" type="primary" @click="dialogIs">确 定</el-button>
          <el-button class="color" @click="dialogVisible1 = false">取 消</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- <pop v-if="dialog" v-model="dialog" :id="video_id" :index="active_name01" /> -->
  </div>
</template>

<script>
import pop from '@/pages/meng/video/pop';
export default {
  props: {},
  data() {
    return {
      dialogVisible1: false, //删除提示弹窗
      orderBy: 1, //1降序 0升序
      sortValue: 0,
      count: ' - ',
      page: 1,
      dialog: false,
      active_name01: '1',
      video_id: '',
      table_data01: [],
      videoId: '',
      videoIdNum: '',
      loading: true,
      isFixed: false,
      showLeft: true
    };
  },
  computed: {},
  created() {
    this.get_data();
  },
  mounted() {
    window.addEventListener('scroll', this.initHeight);
    window.addEventListener('resize', () => {
      //给浏览器窗口绑定变化大小事件
      this.setTBBar();
    });
  },
  watch: {
    '$store.state.left_nav_flag'(old, newOld) {
      this.showLeft = newOld;
      if ((newOld = false)) {
        this.setTBBar();
      } else {
        this.setTBBar();
      }
    }
  },
  methods: {
    // 获取子节点函数（后期可集成到一个库里）
    getChilds(pNode) {
      if (!pNode) return false;
      let nodes = pNode.childNodes;
      let newList = [];
      for (let i = 0; i < nodes.length; i++) {
        let node = nodes[i];
        if (node.nodeType === 1) {
          //判断类型
          newList.push(node);
        }
      }
      return newList;
    },
    // 设置表格表头滑动置顶
    setTBBar() {
      this.$nextTick(() => {
        let tableEl = this.$refs.tableEl;
        let ulEl = this.$refs.fixedThead;
        let tr1 = document.querySelector('#tr1');
        // thTrEl.style.width = tableEl.offsetWidth+'px';
        if (tr1) {
          let tds = this.getChilds(tr1);
          let liEls = this.getChilds(ulEl);
          for (let i = 0; i < liEls.length; i++) {
            liEls[i].style.width = tds[i].offsetWidth + 'px';
          }
        }
      });
    },
    sort_fun(parm01, parm02) {
      if (parm01) {
        this.orderBy = 1;
      } else {
        this.orderBy = 0;
      }
      this.sortValue = parm02;

      this.get_data();
    },
    dialogIs() {
      let that = this;
      that.$axios
        .post(
          '/api/collection/CancelCollection',
          {
            CollectId: this.videoId,
            Module: 2 //模块 1达人 2视频 3音乐 4话题 5商品
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel01 != null) {
                that.cancel01();
              }
              that.cancel01 = c;
            })
          }
        )
        .then(res => {
          if (res.data.code == 0) {
            that.table_data01.splice(this.talentIdNum, 1);
            that.count--;
            this.dialogVisible1 = false;
            this.page = 1;
            this.table_data01 = [];
            this.get_data();
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    no_collect(id, index) {
      this.dialogVisible1 = true;
      this.videoId = id;
      this.videoIdNum = index;
    },
    get_data(cpage) {
      let that = this;
      this.loading = true;
      if (cpage) {
        this.page = cpage;
        this.backTop();
      }
      this.$axios
        .get(
          '/api/collection/GetAwemeCollection',
          {
            params: {
              pageIndex: this.page,
              pageSize: 30,
              order: this.orderBy,
              sort: this.sortValue
            }
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel01) that.cancel01();
              that.cancel01 = c;
            })
          }
        )
        .then(response => {
          if (response.data.code == 0) {
            this.table_data01 = response.data.data;
            this.count = response.data.count;
          }
          if (response.data.code == 1002) {
            this.table_data01 = [];
            this.loading = false;
            this.count = response.data.count;
          }
          this.loading = false;
          this.setTBBar();
        })
        .catch(error => {
          console.log(error);
        });
    },
    go_to_page01(id) {
      let router = this.$router.resolve({
        path: `/talent_main/tdetails/${id}/${0}`
      });
      window.open(router.href, '_blank');
    },
    backTop() {
      document.body.scrollTop = document.documentElement.scrollTop = 0;
    },
    initHeight() {
      var scrollTop =
        window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      this.isFixed = scrollTop > 110 ? true : false;
    },
    destroyed() {
      window.removeEventListener('scroll', this.initHeight);
    },
    // 跳转详情页面
    videoDetails(id) {
      let router = this.$router.resolve({
        path: '/talent_main/videoDetails',
        query: { id }
      });
      window.open(router.href, '_blank');
    }
  },
  components: {
    pop
  }
};
</script>

<style scoped lang="less">
#videoCollect {
  padding: 20px 20px 0 20px;
  min-height: 100vh;
  padding-bottom: 1px;
  .num {
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #888888;
    text-align: left;
  }
  table {
    width: 100%;
    margin-top: 14px;
    box-sizing: border-box;
    position: relative;
    thead {
      img {
        width: 5px;
        height: 10px;
        vertical-align: 0;
      }
      tr {
        width: 100%;
        height: 48px;
        background-color: #f5f9ff;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 400;
        font-stretch: normal;
        letter-spacing: 0;
        color: #555;
        th:nth-child(1) {
          min-width: 10%;
          text-align: left;
          padding-left: 39px;
        }
        th:nth-child(2) {
          text-align: left;
          width: 18.8%;
          padding-left: 39px;
        }

        th:nth-child(3),
        th:nth-child(4),
        th:nth-child(5) {
          width: 12.8%;
          cursor: pointer;
        }
        th:nth-child(6) {
          width: 16.8%;
        }
      }
    }
    tbody {
      tr {
        height: 78px;
        .live_box {
          padding-left: 28px;
          display: flex;
          align-items: center;
          // overflow: hidden;
          // text-overflow: ellipsis;
          .live_box_left {
            position: relative;
          }
          .live_box_left_02 {
            width: 50px;
            height: 50px;
            margin-right: 10px;
            background: #f5f5f5;
            display: flex;
            border-radius: 6px;
            align-items: center;
            justify-content: center;
            img {
              width: 20px;
              height: 18px;
              border-radius: 0;
              margin-right: 0px;
            }
          }
          img {
            width: 50px;
            height: 50px;
            border-radius: 6px;
            margin-right: 10px;
            cursor: pointer;
          }
          .playImg {
            position: absolute;
            top: 3px;
            cursor: pointer;
            left: 3px;
            width: 45px;
            height: 45px;
            display: none;
          }
          .live_box_left:hover {
            .playImg {
              display: block;
            }
          }
          .live_box_right {
            display: flex;
            flex-direction: column;
            justify-content: center;
          }
          .title {
            font-size: 14px;
            font-weight: 600;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #222222;
            cursor: pointer;
          }
          .title:hover {
            color: #ff924b;
          }
          .delete {
            background-color: #f5f5f5;
            border-radius: 4px;
            border: solid 1px #e5e5e5;
            font-size: 12px;
            font-weight: normal;
            line-height: 22px;
            color: #888888;
            width: 88px;
            height: 22px;
            text-align: center;
            margin-right: 37px;
          }
          .time {
            font-size: 13px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #888888;
            text-align: left;
            margin-top: 6px;
            white-space: nowrap;
          }
          .talent_photo {
            border-radius: 50%;
          }
        }
      }
      tr:hover {
        .no_collect {
          background: #fffaf7;
        }
      }
      td:nth-child(3),
      td:nth-child(4),
      td:nth-child(5) {
        font-family: DINAlternate-Bold;
        font-size: 15px;
        text-align: center;
      }
      td:nth-child(6) {
        text-align: center;
        .no_collect {
          width: 88px;
          height: 32px;
          border-radius: 4px;
          border: solid 1px #fd7f2c;
          font-size: 14px;
          letter-spacing: 0px;
          color: #fd7f2c;
        }
        .no_collect:hover {
          color: #ff924b;
          border: solid 1px #ff924b;
        }
      }
    }
  }
  .zw {
    position: absolute;
    top: 288px;
  }
}
.fixedThead {
  display: none;
  position: fixed;
  top: 60px;
  left: 200px;

  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  color: #555;
  background-color: #f5f9ff;
  height: 48px;
  line-height: 48px;
  overflow: hidden;
  z-index: 99;
  font-size: 0;

  li {
    box-sizing: border-box;
    display: inline-block;
    font-size: 14px;
  }

  li:nth-child(3),
  li:nth-child(4),
  li:nth-child(5) {
    cursor: pointer;
  }
  li:nth-child(1),
  li:nth-child(2) {
    padding-left: 39px;
  }
  &.isShow {
    display: block;
  }
  img {
    width: 5px;
    height: 10px;
    vertical-align: 0px;
  }
}
[tc] {
  text-align: center;
}
[tl] {
  text-align: left;
}
[tr] {
  text-align: right;
}
</style>
